<template>
  <div class="position-manage">
    <!-- 头部区域 -->
    <div class="header">
      <div class="header-left">
           <button class="back-button" @click="goBack">
          <i class="iconfont icon-arrow-left"></i>
        </button>
        <h1 class="title">职位管理</h1>
        <span class="total">共 {{ total }} 个职位</span>
      </div>
      <div class="header-right">
        <div class="search-box">
          <input
            v-model="searchKey"
            class="search-input"
            placeholder="请输入职位名称"
            @keyup.enter="handleSearch"
          />
          <button class="search-button" @click="handleSearch">
            <i class="iconfont icon-search"></i>
          </button>
          <button class="clear-button" @click="handleSearchClear" v-if="searchKey">
            <i class="iconfont icon-close"></i>
          </button>
        </div>
        <button class="add-button" @click="handleAddPosition" v-if="canCreatePosition">
          <i class="iconfont icon-add"></i>新增职位
        </button>
      </div>
    </div>



    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 职位表格 -->
      <div class="table-container">
        <div class="table-body">
          <div v-if="loading" class="loading-mask">
            <div class="loading-spinner"></div>
          </div>

          <div v-if="positionList.length === 0 && !loading" class="empty-tips">
            <i class="iconfont icon-box"></i>
            <div class="empty-text">暂无职位数据</div>
          </div>

          <!-- 递归渲染职位树 -->
          <table class="data-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>职位名称</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <template v-for="item in positionList" :key="item.id">
                <tr>
                  <td>{{ item.id }}</td>
                  <td class="tree-node">
                    <span class="indent" :style="{ paddingLeft: `${item.level * 20}px` }"></span>
                    <i class="tree-placeholder"></i> {{ item.name }}
                  </td>
                  <td>
                    <span 
                      class="status-badge"
                      :class="item.status === '1' ? 'active' : 'inactive'"
                    >
                      {{ item.status === '1' ? "启用" : "禁用" }}
                    </span>
                  </td>
                  <td>{{ formatDate(item.created_at) }}</td>
                  <td>{{ formatDate(item.updated_at || item.created_at) }}</td>
                  <td class="control">
                    <button class="v-button" @click="handleEditPosition(item)" v-if="canEditPosition">
                      <i class="iconfont icon-edit"></i> 编辑 
                    </button>
                    <button class="v-button danger" @click="showDeleteConfirm(item.id)" v-if="canDeletePosition && item.children?.length === 0">
                      <i class="iconfont icon-delete"></i> 删除 
                    </button>
                    <button class="v-button" @click="confirmToggleStatus(item.id, item.status === '1' ? '0' : '1')" v-if="canToggleStatus">
                      <i class="iconfont icon-switch"></i> {{ item.status === '1' ? '禁用' : '启用' }}
                    </button>
                  </td>
                </tr>
                <!-- 渲染子职位 -->
                <template v-if="item.children && item.children.length > 0">
                  <template v-for="child in item.children" :key="child.id">
                    <tr>
                      <td>{{ child.id }}</td>
                      <td class="tree-node">
                        <span class="indent" :style="{ paddingLeft: `${child.level * 20}px` }"></span>
                        <span class="child-prefix">——</span> {{ child.name }}
                      </td>
                      <td>
                        <span 
                          class="status-badge"
                          :class="child.status === '1' ? 'active' : 'inactive'"
                        >
                          {{ child.status === '1' ? "启用" : "禁用" }}
                        </span>
                      </td>
                      <td>{{ formatDate(child.created_at) }}</td>
                      <td>{{ formatDate(child.updated_at || child.created_at) }}</td>
                      <td class="control">
                        <button class="v-button" @click="handleEditPosition(child)" v-if="canEditPosition">
                          <i class="iconfont icon-edit"></i> 编辑 
                        </button>
                        <button class="v-button danger" @click="showDeleteConfirm(child.id)" v-if="canDeletePosition && (!child.children || child.children.length === 0)">
                          <i class="iconfont icon-delete"></i> 删除 
                        </button>
                        <button class="v-button" @click="confirmToggleStatus(child.id, child.status === '1' ? '0' : '1')" v-if="canToggleStatus">
                          <i class="iconfont icon-switch"></i> {{ child.status === '1' ? '禁用' : '启用' }}
                        </button>
                      </td>
                    </tr>
                  </template>
                </template>
              </template>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <button
          class="page-button"
          :disabled="page === 1"
          @click="handleCurrentChange(page - 1)"
        >
          上一页
        </button>
        <span class="page-info">
          第 {{ page }} 页 / 共 {{ totalPages }} 页
        </span>
        <button
          class="page-button"
          :disabled="page >= totalPages"
          @click="handleCurrentChange(page + 1)"
        >
          下一页
        </button>
      </div>
    </div>

    <!-- 新增/编辑弹窗 -->
    <div
      class="dialog-overlay"
      :class="{ active: dialogVisible }"
      v-if="dialogVisible"
      @click.self="closeDialog"
    >
      <!-- 云朵装饰 -->
      <div class="cloud cloud-1"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-2"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-3"><i class="iconfont icon-cloud"></i></div>

      <!-- 星星装饰 -->
      <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-3"><i class="iconfont icon-star"></i></div>

      <div
        class="dialog-content"
        :class="{ 'bounce-in': dialogVisible }"
      >
        <div class="dialog-header">
          <div class="dialog-title">
            <h2>{{ editingId ? '编辑职位' : '新建职位' }}</h2>
            <div class="title-underline"></div>
          </div>
          <button
            class="close-btn"
            @click="closeDialog"
          >
            <i class="iconfont icon-close"></i>
          </button>
        </div>

        <div class="dialog-body">
          <!-- 职位名称 -->
          <div class="form-group">
            <label>
              <i class="iconfont icon-name"></i>
              职位名称 <span class="required">*</span>
            </label>
            <input
              v-model="formData.name"
              class="form-input"
              placeholder="请输入职位名称"
            />
          </div>

          <div class="form-row">
            <!-- 状态 -->
            <div class="form-group">
              <label>
                <i class="iconfont icon-status"></i>
                状态 <span class="required">*</span>
              </label>
              <div class="radio-group">
                <div
                  class="radio-item"
                  :class="{ active: formData.status === '1' }"
                  @click="formData.status = '1'"
                >
                  启用
                </div>
                <div
                  class="radio-item"
                  :class="{ active: formData.status === '0' }"
                  @click="formData.status = '0'"
                >
                  禁用
                </div>
              </div>
            </div>
          </div>

          <!-- 上级职位 -->
          <div class="form-group">
            <label>
              <i class="iconfont icon-tree"></i>
              上级职位
            </label>
            <div class="select-wrapper">
              <select v-model="formData.parent_id" class="form-select">
                <option value="0">无</option>
                <option
                  v-for="position in positionOptions"
                  :key="position.id"
                  :value="position.id"
                  :style="{ paddingLeft: `${position.level * 10}px` }"
                >
                  {{ position.name }}
                </option>
              </select>
              <i class="iconfont icon-arrow-down"></i>
            </div>
          </div>
        </div>

        <div class="dialog-footer">
          <button
            class="btn cancel-btn"
            @click="closeDialog"
          >
            <i class="iconfont icon-close"></i>取消
          </button>
          <button
            class="btn submit-btn"
            @click="handleSubmit"
            :disabled="loading"
          >
            <i class="iconfont icon-save"></i>{{ editingId ? '保存修改' : '创建职位' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div
      class="dialog-overlay"
      :class="{ active: showDeletePopup }"
      v-if="showDeletePopup"
      @click.self="showDeletePopup = false"
    >
      <!-- 云朵装饰 -->
      <div class="cloud cloud-1"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-2"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-3"><i class="iconfont icon-cloud"></i></div>

      <!-- 星星装饰 -->
      <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-3"><i class="iconfont icon-star"></i></div>

      <div
        class="dialog-content"
        :class="{ 'bounce-in': showDeletePopup }"
      >
        <div class="dialog-header">
          <div class="dialog-title">
            <h2>确认删除</h2>
            <div class="title-underline"></div>
          </div>
          <button
            class="close-btn"
            @click="showDeletePopup = false"
          >
            <i class="iconfont icon-close"></i>
          </button>
        </div>

        <div class="dialog-body">
          <div class="confirm-message">
            <i class="iconfont icon-warning"></i>
            <p>确定要删除该职位吗？删除后不可恢复！</p>
          </div>
        </div>

        <div class="dialog-footer">
          <button
            class="btn cancel-btn"
            @click="showDeletePopup = false"
          >
            <i class="iconfont icon-close"></i>取消
          </button>
          <button
            class="btn delete-btn"
            @click="handleDelete"
          >
            <i class="iconfont icon-delete"></i>确定删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { request } from "@/request";
import { vToast } from "@/plugins/vToast";
import { useRouter } from "vue-router";

const router = useRouter();

// 返回方法
const goBack = () => {
  router.go(-1); // 返回上一页
};

// 数据定义
const positionList = ref([]);
const positionTree = ref([]);
const positionOptions = ref([]);
const loading = ref(false);
const searchKey = ref('');
const page = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 弹窗控制
const dialogVisible = ref(false);
const showDeletePopup = ref(false);
const deletingId = ref(0);
const editingId = ref(0);
const formData = ref({
  name: '',
  status: '1',
  parent_id: '0'
});

// 计算属性
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));

// 权限判断
const canCreatePosition = computed(() => {
  // 这里可以根据companymanager项目的权限控制逻辑进行修改
  return true;
});

const canEditPosition = computed(() => {
  // 这里可以根据companymanager项目的权限控制逻辑进行修改
  return true;
});

const canDeletePosition = computed(() => {
  // 这里可以根据companymanager项目的权限控制逻辑进行修改
  return true;
});

const canToggleStatus = computed(() => {
  // 这里可以根据companymanager项目的权限控制逻辑进行修改
  return true;
});

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  
  // 尝试多种方式解析日期
  let date;
  
  // 检查是否为时间戳
  if (typeof dateString === 'number' || /^\d+$/.test(dateString)) {
    date = new Date(parseInt(dateString) * 1000); // 假设是秒级时间戳
  } else {
    date = new Date(dateString);
  }
  
  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    return '日期格式错误';
  }
  
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 构建职位树结构
const buildPositionTree = (positions, parentId = 0, level = 0) => {
  const tree = [];
  // 处理空数组情况
  if (!positions || positions.length === 0) {
    return tree;
  }
  
  positions.forEach(position => {
    // 处理parent_id为null的情况（顶级职位）和普通情况
    const isMatch = (parentId === 0 && position.parent_id === null) || position.parent_id === parentId;
    if (isMatch) {
      const children = buildPositionTree(positions, position.id, level + 1);
      const node = {
        ...position,
        children,
        level
      };
      tree.push(node);
    }
  });
  return tree;
};

// 构建职位选项
const buildPositionOptions = (positions, parentId = 0, level = 0) => {
  const options = [];
  // 处理空数组情况
  if (!positions || positions.length === 0) {
    return options;
  }
  
  positions.forEach(position => {
    // 处理parent_id为null的情况（顶级职位）和普通情况
    const isMatch = (parentId === 0 && position.parent_id === null) || position.parent_id === parentId;
    if (position.id !== editingId.value && isMatch) {
      options.push({
        ...position,
        level
      });
      const children = buildPositionOptions(positions, position.id, level + 1);
      options.push(...children);
    }
  });
  return options;
};

// 获取职位列表
const fetchPositions = async () => {
  loading.value = true;
  try {
    const params = {
      page: page.value,
      page_size: pageSize.value
    };

    if (searchKey.value) {
      params.keyword = searchKey.value;
    }



    const response = await request({
      url: '/position/list',
      method: 'get',
      params
    });

    if (response.code === 200) {
      const positions = response.data.list || [];
      positionTree.value = buildPositionTree(positions);
      positionList.value = positionTree.value;
      total.value = response.data.pagination?.total || 0;
    } else {
      throw new Error(response.message || '获取职位列表失败');
    }
  } catch (error) {
    console.error('获取职位列表失败:', error);
    vToast({ message: '获取职位列表失败' });
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  page.value = 1;
  fetchPositions();
};

// 清空搜索
const handleSearchClear = () => {
  searchKey.value = "";
  page.value = 1;
  fetchPositions();
};



// 分页大小变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  fetchPositions();
};

// 当前页码变化
const handleCurrentChange = (newPage) => {
  page.value = newPage;
  fetchPositions();
};

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
  // 重置表单数据
  setTimeout(() => {
    editingId.value = 0;
    formData.value = {
      name: '',
      status: '1',
      parent_id: '0'
    };
  }, 300);
};

// 显示创建弹窗
const handleAddPosition = () => {
  editingId.value = 0;
  formData.value = {
    name: '',
    status: '1',
    parent_id: '0'
  };
  // 构建所有职位选项，排除当前编辑的职位
  positionOptions.value = buildPositionOptions(positionList.value.flatMap(item => [item, ...(item.children || [])]));
  dialogVisible.value = true;
};

// 显示编辑弹窗
const handleEditPosition = (item) => {
  editingId.value = item.id;
  formData.value = {
    name: item.name,
    status: item.status.toString(),
    // 处理顶级职位的parent_id为null的情况
    parent_id: item.parent_id === null ? '0' : item.parent_id.toString()
  };
  // 构建所有职位选项，排除当前编辑的职位
  positionOptions.value = buildPositionOptions(positionList.value.flatMap(item => [item, ...(item.children || [])]));
  dialogVisible.value = true;
};

// 显示删除确认
const showDeleteConfirm = (id) => {
  deletingId.value = id;
  showDeletePopup.value = true;
};

// 提交表单
const handleSubmit = async () => {
  if (!formData.value.name.trim()) {
    vToast({ message: "请输入职位名称" });
    return;
  }

  loading.value = true;

  try {
    const api = editingId.value ? "/position/update" : "/position/create";
    const successMsg = editingId.value ? "修改成功" : "创建成功";

    const res = await request({
      url: api,
      method: 'post',
      data: {
        ...formData.value,
        id: editingId.value || undefined
      }
    });

    if (res && res.code === 200) {
      vToast({ message: successMsg });
      closeDialog();
      fetchPositions();
    } else {
      throw new Error(res.message || "提交失败");
    }
  } catch (error) {
    console.error(editingId.value ? "编辑职位失败:" : "创建职位失败:", error);
    vToast({ message: error.message || (editingId.value ? "编辑职位失败" : "创建职位失败") });
  } finally {
    loading.value = false;
  }
};

// 处理删除
const handleDelete = async () => {
  try {
    const res = await request({
      url: "/position/delete",
      method: 'post',
      data: { id: deletingId.value }
    });
    if (res && res.code === 200) {
      vToast({ message: "删除成功" });
      showDeletePopup.value = false;
      fetchPositions();
    } else {
      throw new Error(res.message || "删除失败");
    }
  } catch (error) {
    console.error("删除职位失败:", error);
    vToast({ message: error.message || "删除职位失败" });
  }
};

// 切换状态
const confirmToggleStatus = async (id, status) => {
  try {
    const res = await request({
      url: "/position/update",
      method: 'post',
      data: {
        id,
        status
      }
    });
    if (res && res.code === 200) {
      vToast({ message: "切换状态成功" });
      fetchPositions();
    } else {
      throw new Error(res.message || "切换状态失败");
    }
  } catch (error) {
    console.error("切换状态失败:", error);
    vToast({ message: error.message || "切换状态失败" });
  }
};

// 生命周期
onMounted(() => {
  fetchPositions();
});
</script>

<style scoped lang="less">
.position-manage {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  .back-button {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      border-color: var(--bs-theme-color);
      color: var(--bs-theme-color);
    }
    
    .iconfont {
      font-size: 14px;
    }
  }

  .header-left {
    display: flex;
    align-items: center;
    
    .title {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
    
    .total {
      margin-left: 15px;
      font-size: 14px;
      color: #909399;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;

    .search-box {
      display: flex;
      align-items: center;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      overflow: hidden;

      .search-input {
        width: 250px;
        height: 36px;
        padding: 0 12px;
        border: none;
        outline: none;
        font-size: 14px;
        color: #606266;

        &:focus {
          border-color: var(--bs-theme-color);
        }
      }

      .search-button,
      .clear-button {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f7fa;
        border: none;
        cursor: pointer;
        color: #909399;

        &:hover {
          color: var(--bs-theme-color);
        }
      }
    }

    .add-button {
      height: 36px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      background-color: var(--bs-theme-color);
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: #66b1ff;
      }

      .iconfont {
        margin-right: 5px;
        font-size: 14px;
      }
    }
  }
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  .filter-item {
    display: flex;
    align-items: center;

    label {
      margin-right: 10px;
      font-size: 14px;
      color: #606266;
    }

    .select-wrapper {
      position: relative;
      display: inline-block;

      .status-select {
        padding: 6px 30px 6px 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: #fff;
        font-size: 14px;
        color: #606266;
        cursor: pointer;
        outline: none;
        transition: border-color 0.3s;

        &:focus {
          border-color: var(--bs-theme-color);
        }
      }

      .iconfont {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #909399;
        pointer-events: none;
      }
    }
  }
}

.main-content {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container {
  width: 100%;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #eee;
}

.header-cell {
  padding: 12px;
  text-align: left;
}

.table-body {
  position: relative;
  min-height: 200px;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eee;

  &:last-child {
    border-bottom: none;
  }
}

.child-row {
  background-color: #fafafa;
}

.children-container {
  border-left: 2px dashed #e4e7ed;
  margin-left: 20px;
}

.table-cell {
  padding: 12px;
  color: #606266;
  display: flex;
  align-items: center;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.action-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;

  &.edit {
    background-color: #ecf5ff;
    color: var(--bs-theme-color);

    &:hover {
      background-color: #d9ecff;
    }
  }

  &.delete {
    background-color: #fef0f0;
    color: #f56c6c;

    &:hover {
      background-color: #fde2e2;
    }
  }

  &.toggle {
    background-color: #f5f7fa;
    color: #909399;

    &:hover {
      background-color: #e4e7ed;
    }

    &.active {
      background-color: #f0f9eb;
      color: #67c23a;

      &:hover {
        background-color: #e1f3d8;
      }
    }

    &.inactive {
      background-color: #fef0f0;
      color: #f56c6c;

      &:hover {
        background-color: #fde2e2;
      }
    }
  }
}

.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;

  &.active {
    background-color: #f0f9eb;
    color: #67c23a;
  }

  &.inactive {
    background-color: #fef0f0;
    color: #f56c6c;
  }
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--bs-theme-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-tips {
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;

  .iconfont {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .empty-text {
    font-size: 16px;
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.page-button {
  height: 32px;
  padding: 0 15px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;

  &:hover:not(:disabled) {
    color: var(--bs-theme-color);
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.page-info {
  font-size: 14px;
  color: #606266;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  overflow: hidden;
  transition: background-color 0.3s ease-out;

  &.active {
    background-color: rgba(0, 0, 0, 0.45);
  }

  /* 云朵装饰 */
  .cloud {
    position: absolute;
    font-size: 80px;
    opacity: 0;
    animation: float 8s infinite ease-in-out;
    z-index: -1;
    transition: opacity 0.5s ease;
    color: white;

    &.cloud-1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }
    &.cloud-2 {
      top: 60%;
      right: 15%;
      animation-delay: 1s;
    }
    &.cloud-3 {
      bottom: 10%;
      left: 25%;
      animation-delay: 2s;
    }
  }

  &.active .cloud {
    opacity: 0.1;
  }

  /* 星星装饰 */
  .decoration {
    position: absolute;
    font-size: 18px;
    animation: float 6s infinite ease-in-out;
    z-index: -1;
    color: var(--bs-theme-color);
    opacity: 0;

    &.star-1 {
      top: 15%;
      right: 15%;
      animation-delay: 0.5s;
    }
    &.star-2 {
      top: 70%;
      left: 15%;
      animation-delay: 1s;
    }
    &.star-3 {
      bottom: 15%;
      right: 20%;
      animation-delay: 1.5s;
    }
  }

  &.active .decoration {
    opacity: 0.1;
  }
}

/* 弹窗内容容器 */
.dialog-content {
  width: 500px;
  max-width: 90vw;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100000;

  /* 弹入动画 */
  &.bounce-in {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* 弹窗头部 */
  .dialog-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bs-theme-color);
    color: white;
    position: relative;
    z-index: 2;

    .dialog-title {
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
      
      .title-underline {
        height: 2px;
        width: 40px;
        background: white;
        border-radius: 1px;
        margin-top: 6px;
      }
    }

    .close-btn {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }

  /* 弹窗主体 */
  .dialog-body {
    padding: 15px;
    position: relative;
    z-index: 2;

    .form-group {
      margin-bottom: 12px;

      label {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #606266;
        margin-bottom: 6px;

        .iconfont {
          margin-right: 6px;
          font-size: 14px;
        }

        .required {
          color: #f56c6c;
        }
      }

      .form-input,
      .form-select {
        width: 100%;
        padding: 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 13px;
        transition: all 0.3s;
        background: white;
        color: #333;

        &:focus {
          outline: none;
          border-color: var(--bs-theme-color);
        }
      }

      .select-wrapper {
        position: relative;
        display: block;

        .form-select {
          padding-right: 30px;
          appearance: none;
          cursor: pointer;
        }

        .iconfont {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #909399;
          pointer-events: none;
        }
      }
    }

    .form-row {
      display: flex;
      gap: 12px;

      .form-group {
        flex: 1;
      }
    }

    .radio-group {
      display: flex;
      gap: 10px;
      margin-top: 5px;
      
      .radio-item {
        padding: 8px 15px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: #fff;
        color: #606266;
        font-size: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        &.active {
          background-color: var(--bs-theme-color);
          color: white;
          border-color: var(--bs-theme-color);
        }
      }
    }

    .confirm-message {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      text-align: center;
      
      .iconfont {
        font-size: 40px;
        color: #e6a23c;
        margin-bottom: 15px;
      }
      
      p {
        margin: 0;
        color: #606266;
        font-size: 14px;
      }
    }
  }

  /* 弹窗底部 */
  .dialog-footer {
    padding: 12px 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f5f7fa;
    border-top: 1px solid #dcdfe6;
    position: relative;
    z-index: 2;

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      &.cancel-btn {
        background: white;
        color: #606266;

        &:hover:not(:disabled) {
          background: #f2f6fc;
          transform: translateY(-1px);
        }
      }

      &.submit-btn {
        background: var(--bs-theme-color);
        color: white;
        border-color: var(--bs-theme-color);

        &:hover:not(:disabled) {
          background: #66b1ff;
          transform: translateY(-1px);
        }
      }

      &.delete-btn {
        background: #f56c6c;
        color: white;
        border-color: #f56c6c;

        &:hover:not(:disabled) {
          background: #f78989;
          transform: translateY(-1px);
        }
      }
    }
  }
}

/* 表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.data-table thead {
  background-color: #f5f5f5;
}

.data-table th {
  padding: 12px;
  text-align: left;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #eee;
}

.data-table tbody tr {
  border-bottom: 1px solid #eee;
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table td {
  padding: 12px;
  color: #606266;
}

/* 树节点样式 */
.tree-node {
  display: flex;
  align-items: center;
}

.indent {
  display: inline-block;
}

.tree-placeholder {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.child-prefix {
  color: #c0c4cc;
  margin-right: 5px;
}

/* 状态徽章样式 */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-badge.inactive {
  background-color: #fef0f0;
  color: #f56c6c;
}

/* 按钮样式 */
.v-button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  margin-right: 5px;
}

.v-button:hover {
  color: var(--bs-theme-color);
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.v-button.danger {
  color: #f56c6c;
  border-color: #fbc4c4;
  background-color: #fef0f0;
}

.v-button.danger:hover {
  color: #f56c6c;
  border-color: #f56c6c;
  background-color: #fef0f0;
}

.control {
  white-space: nowrap;
}

/* 浮动动画 */
@keyframes float {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg); 
  }
  25% { 
    transform: translateY(-15px) translateX(5px) rotate(2deg); 
  }
  50% { 
    transform: translateY(0) translateX(10px) rotate(0deg); 
  }
  75% { 
    transform: translateY(-10px) translateX(-5px) rotate(-2deg); 
  }
}

/* 响应式设计 */
@media (max-width: 600px) {
  .position-manage {
    padding: 10px;
  }
  
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    
    .header-right {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }
    
    .search-box {
      width: 100%;
      
      .search-input {
        width: 100%;
      }
    }
  }
  
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    
    .filter-item {
      justify-content: space-between;
      
      .select-wrapper {
        min-width: 150px;
      }
    }
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  .table-header,
  .table-row {
    min-width: 600px;
  }
  
  .dialog-content {
    width: 90vw;

    .dialog-header {
      padding: 12px;

      .dialog-title h2 {
        font-size: 16px;
      }
    }

    .dialog-body {
      .form-row {
        flex-direction: column;
        gap: 12px;
      }
    }

    .dialog-footer {
      flex-wrap: wrap;
      
      .btn {
        flex: 1;
        min-width: 100px;
        padding: 6px 12px;
        font-size: 12px;
      }
    }
  }
}
</style>